<script setup lang="ts">
import { computed } from "vue";
import { storeToRefs } from "pinia";
import { NumberUtils } from "../../src/utils";
import { useMarketStore } from "../../src/cache/MarketStore";
import { emitter } from "../../src/bus";
import { useCacheStore } from "../../src/sde/cache";

const props = withDefaults(defineProps<{ id: number; showPrice?: boolean }>(), {
  showPrice: true,
});
const marketStore = useMarketStore();
const cacheStore = useCacheStore();
const { typePrices } = storeToRefs(marketStore);

const type = computed(() => {
  return cacheStore.getType(props.id);
});

const price = computed(() => {
  return typePrices.value?.get(props.id);
});
</script>

<template>
  <div v-if="type" class="space-x-2">
    <span @click="() => emitter.emit('show-type-details', type!.id)"> {{ type.name }} </span>
    <el-space v-if="showPrice">
      <el-tag v-if="price?.estimate_price" disable-transitions
        >预估{{ NumberUtils.readableText(price.estimate_price) }}</el-tag
      >
      <el-tag v-if="price?.jita_avg_price" disable-transitions type="warning">
        中间价{{ NumberUtils.readableText(price.jita_avg_price) }}
      </el-tag>
      <el-tag v-if="price?.buy_high" disable-transitions type="success"
        >买单{{ NumberUtils.readableText(price.buy_high) }}</el-tag
      >
      <el-tag v-if="price?.sell_low" disable-transitions type="danger"
        >卖单{{ NumberUtils.readableText(price.sell_low) }}</el-tag
      >
    </el-space>
  </div>
</template>

<style scoped lang="scss"></style>
